<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>研究资源共享平台</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>

    <style>
        /*对layui中的样式进行重写*/
        .layui-tab-content {
            padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/
        }
        .show-frame {
            top: 50px!important;
            /*默认.layui-layout-admin .layui-body {
                top: 60px;
                bottom: 44px;
            }*/
            overflow: hidden;/*消除浏览器最右边的滚动条*/
        }
        .frame {
            position: absolute;
            padding: 10px;/*与layui-
            footer隔开一段距离*/
            width: 100%;
            height: 100%;
        }
    </style>
    <style>
        .ui_upload{
            height: 35px;
            width: 80px;
            background-color: #2be8ee;
            font-size: 14px;
            line-height: 35px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            color: #fff;
            border-radius: 3px;
            margin-left: 0;
        }


    </style>

</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="/common/header :: headerBar"></div>
    <div th:replace="/admuser/lefter :: lefterBar"></div>

    <div class="layui-body show-frame">
        <div class="layui-tab layui-tab-brief" lay-allowClose="true" lay-filter="empTab">
            <ul class="layui-tab-title">
                <li class="layui-this "><i class="layui-icon">资源统计</i></li>
            </ul>
            <div class="layui-tab-content">
                <br>
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">资源总数</label>
                        <div class="layui-input-inline">
                            <input type="text" name="resourceName" style="border: none; outline: none" th:value="${resourceList.size()}" readonly autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">资源列表</label>
                        <div class="layui-input-block">
                            <div style="height: 400px;width:auto;overflow: auto;">
                                <table id="demo" lay-filter="test" class="layui-table">
                                    <thead>
                                    <tr>
                                        <th lay-data="{field:'resourceID', width:80}">资源ID</th>
                                        <th lay-data="{field:'resourceName', width:180}">资源名</th>
                                        <th lay-data="{field:'resourceType', width:180}">资源类型</th>
                                        <th lay-data="{field:'visitVolume', width:180}">访问量</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <label class="layui-form-label"></label>
                                    <tr th:each="re:${resourceList}">
                                        <td>[[${re.resourceID}]]</td>
                                        <td>[[${re.resourceName}]]</td>
                                        <td>[[${re.resourceType==1?'论文':(re.resourceType==2?'代码':'数据集')}]]</td>
                                        <td>[[${re.visitVolume}]]</td>
                                    </tr>
                                    </tbody>

                                </table>
                            </div>
                        </div>

                    </div>
                    <form class="layui-form" action="/overloadResourceTableStatistic">
                        <div class="layui-form-item">
                            <label class="layui-form-label">资源名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="resourceName" placeholder="请输入资源名" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">资源类型</label>
                            <div class="layui-input-inline">
                                <select name="resourceType">
                                    <option value=""></option>
                                    <option value="1">论文</option>
                                    <option value="2">代码</option>
                                    <option value="3">数据集</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit>查询</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div th:replace="/common/footer :: footerBar"></div>
</div>
<script src="../layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        var $ = layui.$;
        $("[name=t1]").click(function () {
            var id = $(this).attr("id");
            var content = $(this).attr("content");
            if($("li[lay-id="+id+"]").length===0){
                element.tabAdd("empTab",{
                    title:$(this).attr("title"),
                    content:"<iframe src='"+content+"' class='frame' frameborder='0'></iframe>",
                    id:id
                })
            }
            element.tabChange('empTab',id)
        })

    });
</script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

</script>





</body>
</html>
